<template>
  <div>
    <TableHead />
    <a-table
      v-model:selected-keys="keys"
      :row-key="tableData.rowKey"
      :row-selection="{
        selectedRowKeys: keys
      }"
      :loading="tableData.loading"
      :data="tableData.data"
      :bordered="false"
      class="table-container"
      :columns="translateColumns(columns.columns)"
      :pagination="{
        current: userQuery.pageNum,
        total: userQuery.total,
        pageSize: userQuery.pageSize
      }"
      @page-change="pageChange"
    >
      <template #operation="{ record }">
        <div class="flex gap-2 justify-center">
          <a-dropdown-button size="mini" @click="editUser(record.userId)">
            <IconEdit />
            <template #content>
              <a-menu>
                <a-menu-item @click="del(record.userId)">
                  <template #icon>
                    <IconDelete />
                  </template>
                  {{ t["删除"] }}
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown-button>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import columns from "../data/column";
import { del, editUser, fetchListUser } from "../data/curd";
import { keys, tableData, userQuery } from "../data/table";
import TableHead from "./table-head/TableHead.vue";

const t = translate("公共模块");
onMounted(async () => {
  await fetchListUser();
});

const pageChange = (page: number) => {
  userQuery.value.pageNum = page;
  fetchListUser();
};
</script>

<style lang="scss" scoped></style>
